<template>
  <div class="wp-product-search">
    <search-bar :search="searchParams" @on-search="search">
      <el-form :model="searchParams" label-width="70px">
        <el-row :gutter="5">
          <el-col :span="10">
            <el-form-item label="产品标签">
              <el-select
                v-model="searchParams.tag"
                placeholder="产品标签"
                clearable
              >
                <el-option
                  v-for="item in tagOptions"
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="产品名称">
              <el-input
                v-model="searchParams.productName"
                placeholder="产品名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </search-bar>
    <page-table
      ref="productTable"
      WP_TableId="productTable"
      :WP_CurrentPage="currentPage"
      :WP_PageSize="pageSize"
      :WP_List="list"
      :WP_TotalRow="totalRow"
      :WP_Loading="loading"
      :WP_PageSizes="[2, 5]"
      :WP_CurrentRowKey="'productCode'"
      @selection-change="selectionChange"
      :WP_RowKey="getRowKey"
    >
      <el-table-column
        :selectable="checkSelect"
        type="selection"
        reserve-selection
        width="55"
      >
      </el-table-column>
      <el-table-column
        label="产品名称"
        prop="productName"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="库存数量" prop="stockCount"></el-table-column>
      <el-table-column
        label="单价（MSRP）"
        prop="price"
        width="120"
      ></el-table-column>
      <el-table-column label="产品标签" prop="tagText"></el-table-column>
      <el-table-column label="产品型号" prop="model"></el-table-column>
      <el-table-column
        label="产品描述"
        prop="remark"
        show-overflow-tooltip
      ></el-table-column>
    </page-table>
    <div class="wp-product-card">
      <component
        :is="componentName"
        :list="selectProducts"
        @cancel="cancel"
        @save="save"
        :lableInfo="lableInfo"
      ></component>
    </div>
  </div>
</template>

<script>
import {
  getAllProductTagAPI,
  getSalesProductInfoListAPI
} from '@/api/crm/productAPI'
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import OrderProductCard from './OrderProductCard'
import StockProductCard from './StockProductCard'
import { deepClone } from '@/utils'
export default {
  name: 'ProductSearch',
  props: {
    plist: {
      type: Array,
      default: () => {
        return []
      }
    },
    lableInfo: Object,
    componentName: { type: String, default: 'OrderProductCard' }
  },
  components: { SearchBar, PageTable, OrderProductCard, StockProductCard },
  mounted () {
    this.getAllProductTag()
    this.init()
  },
  data () {
    return {
      loading: false, // 加载
      searchParams: {}, // 查询条件参数
      list: [], // 数据集合
      totalRow: 0, // 总行数
      pageSize: 5, // 每页行数
      currentPage: 1, // 当前页,
      selectProducts: [], // 选中的产品
      tabelSelects: [], // 列表选中的
      tagOptions: []
    }
  },
  methods: {
    init () {
      this.getList({ currentPage: this.currentPage, pageSize: this.pageSize })
    },
    getRowKey (row) {
      return row.productCode
    },
    selectionChange (selection) {
      this.tabelSelects = [...selection]
      this.selectProducts = deepClone(selection)
      this.selectProducts.forEach(item => {
        item.remark = ''
      })
    },
    save (row) {
      this.$emit('save', row)
    },
    cancel (row) {
      const selectRow = this.tabelSelects.find((item) => {
        return item.productCode === row.productCode
      })
      this.$refs.productTable.toggleRowSelection(selectRow, false)
    },
    getAllProductTag () {
      getAllProductTagAPI().then((res) => {
        this.tagOptions = res.data
      })
    },
    getList (pageInfo) {
      const params = {
        page: pageInfo.currentPage,
        limit: pageInfo.pageSize,
        search: { ...this.searchParams }
      }
      // console.log('请求参数：', params)
      this.loading = true
      const self = this
      getSalesProductInfoListAPI(params).then((res) => {
        setTimeout(() => {
          self.loading = false
          self.list = res.data.list
          self.totalRow = res.data.totalRow
        }, 1000)
        self.$nextTick(() => {
          document.querySelector('.el-table__body-wrapper').scrollTop = 1
        })
      })
    },
    checkSelect (row, index) {
      if (this.plist && this.plist.length > 0) {
        const productInfo = this.plist.find((item) => {
          return item.productCode === row.productCode
        })
        return (
          !productInfo || Object.getOwnPropertyNames(productInfo).length === 0
        )
      }
      return true
    },
    search (searchParams) {
      this.searchParams = searchParams
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-product-search {
  width: 100%;
  padding: 20px;
}
</style>
